<template>
    <el-drawer title="编辑申请" :visible.sync="visible">
        <div class="item">
            <h4 v-if="title">变更数据:{{ title }}</h4>
        </div>
        <el-form ref="ruleForm" :model="ruleForm" class="demo-ruleForm">
            <el-form-item label="审批" prop="agree">
                <el-select v-model="ruleForm.agree">
                    <el-option v-for="item in agreeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="拒绝理由" prop="fail_reason">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.fail_reason">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script>
import { updateApply } from '@/api/personnel'
export default {
    data() {
        return {
            visible: false,
            title:'',
            agreeOptions: [
                { value: 0, label: '拒绝' },
                { value: 1, label: '同意' },
            ],
        }
    },
    props: {
        ruleForm: {
            type: Object,
            required: true
        }
    },
    methods: {
        async submitForm() {
            try {
                const result = await updateApply(this.ruleForm)
                this.$message({
                    message: '审批完成',
                    type: 'success'
                });
                this.visible=false
            } catch (error) {
                let errMsg = error?.response?.data?.message ??
                             error.message ??
                             '操作失败'

                this.$message.error(errMsg);
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.item{
    margin: 0 20px;
    color: #606266;
    font-size: 14px;
}
.demo-ruleForm {
    margin: 0 20px;
}
</style>
  